<template>
  <div class="index_main" style="position:relative;overflow-y: hidden;">

    <div class="sky">
      <div class="clouds_one"></div>
      <div class="clouds_two"></div>
      <div class="clouds_three"></div>
    </div>

  </div>
</template>

<script>
import request from "../../utils/request";
import MyCanvas from "@/views/canvas/MyCanvas";

export default {
  name: "navPage",
  components: {
    MyCanvas,
  },
  data() {
    return {};
  },
  watch: {},
  created() {

  },
  destroyed() {

  },
  methods: {


    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {
      });
    }

  }
};
</script>

<style lang="scss" scoped>
.sky {
  height: 100%;
  background: rgba(163, 217, 255, 0.16);
  position: relative;
  overflow: hidden;
  -webkit-animation: sky_background 50s ease-out infinite;
  -moz-animation: sky_background 50s ease-out infinite;
  -o-animation: sky_background 50s ease-out infinite;
  animation: sky_background 50s ease-out infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.clouds_one {
  background: url("../../assets/cloud/cloud_one.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 500px;
  width: 300%;
  -webkit-animation: cloud_one 50s linear infinite;
  -moz-animation: cloud_one 50s linear infinite;
  -o-animation: cloud_one 50s linear infinite;
  animation: cloud_one 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.clouds_two {
  background: url("../../assets/cloud/cloud_two.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 500px;
  width: 300%;
  -webkit-animation: cloud_two 75s linear infinite;
  -moz-animation: cloud_two 75s linear infinite;
  -o-animation: cloud_two 75s linear infinite;
  animation: cloud_two 75s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.clouds_three {
  background: url("../../assets/cloud/cloud_three.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 500px;
  width: 300%;
  -webkit-animation: cloud_three 100s linear infinite;
  -moz-animation: cloud_three 100s linear infinite;
  -o-animation: cloud_three 100s linear infinite;
  animation: cloud_three 100s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@-webkit-keyframes sky_background {
  0% {
    background: rgba(163, 217, 255, 0.16);
    color: rgba(163, 217, 255, 0.16)
  }
  50% {
    background: #58a9ff;
    color: #58a9ff
  }
  100% {
    background: rgba(163, 217, 255, 0.16);
    color: rgba(163, 217, 255, 0.16)
  }
}

@-moz-keyframes sky_background {
  0% {
    background: #a3d9ff;
    color: #a3d9ff
  }
  50% {
    background: #58a9ff;
    color: #58a9ff
  }
  100% {
    background: #a3d9ff;
    color: #a3d9ff
  }
}

@keyframes sky_background {
  0% {
    background: #a3d9ff;
    color: #a3d9ff;
  }
  50% {
    background: #9acbf5;
    color: #9acbf5;
  }
  100% {
    background: #a3d9ff;
    color: #a3d9ff;
  }
}

@-webkit-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@keyframes cloud_one {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-webkit-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@keyframes cloud_two {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-webkit-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@-moz-keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}

@keyframes cloud_three {
  0% {
    left: 0
  }
  100% {
    left: -200%
  }
}
</style>
<style lang="scss" scoped>
body {
  overflow: hidden;
}
</style>

